import React, { Component } from 'react'

import { Modal, Form, Input, Button, Table } from 'antd';
import { connect } from 'dva';

interface IProps {
  dispatch?: Function,
  history?: any,
  visible: boolean,
  cancelMaintenance: Function,
  setMaintenance: Function,
  form: any,
  list?: {
    data: Array<any>,
    dataCnt: number | string
  },
  loading?: boolean
}

const FormItem = Form.Item;
const ONE_PAGE_SIZE = 5;

@connect(({ owner, loading }) => ({
  list: owner.maintenanceList,
  loading: loading.effects['owner/queryMaintenancePage']
}))
class MaintenanceModalForm extends Component<IProps, any> {

  state = {
    selectedRows: [],
    selectedRowKeys: null,
  }

  handleCancel = () => {
    this.props.cancelMaintenance()
  }

  handleOk = () => {
    this.props.setMaintenance(this.state.selectedRows[0])
  }

  queryData(name?, pageNum = 0, pageSize = ONE_PAGE_SIZE) {
    const { dispatch } = this.props;
    dispatch({
      type: 'owner/queryMaintenancePage',
      payload: {
        name,
        pageNum,
        pageSize
      }
    })
    this.setState({
      selectedRows: [],
      selectedRowKeys: null,
    })
  }

  search = e => { e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.queryData(values.name)
      }
    });
  }

  componentDidMount() {
    this.queryData()
  }

  onSelectChange = (selectedRowKeys:any, selectedRows:any) => {
    this.setState({selectedRowKeys, selectedRows});
  }

  render() {
    const { visible, list, form } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { data = [], dataCnt } = list;

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange,
      type: 'radio'
    };

    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: index,
      id: item.id,
      name: item.name,
      corporation: item.corporation,
      corporationMobile: item.corporationMobile,
      engineerPeopleScale: item.engineerPeopleScale
      })
    ) : []
    const pagination = {
      total: +dataCnt,
      showTotal: total => `共 ${+total} 条`,
      showQuickJumper: true,
      pageSize: ONE_PAGE_SIZE,
      size: "small",
      onChange: (current) => {
        this.setState({ current })
        this.props.form.validateFields((err, values) => {
          if (!err) {
            this.queryData(values.name, current)
          }
        });
      },
    };
    const columns = [{
      title: '单位名称',
      dataIndex: 'name',
    }, {
      title: '法人代表',
      dataIndex: 'corporation',
    }, {
      title: '法人联系电话',
      dataIndex: 'corporationMobile',
    }, {
      title: '注册消防工程师人数',
      dataIndex: 'engineerPeopleScale'
    }];

    return (
      <Modal
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        width={700}
      >
        <Form layout="inline">
          <FormItem label="单位名称">
            {getFieldDecorator('name', {
              rules: [{ message: '输入单位名称' }],
            })(
              <Input style={{width: '160px'}} placeholder="单位名称" />
            )}
          </FormItem>
          <FormItem>
          <Button htmlType="submit">搜索</Button>
          </FormItem>
        </Form>
        <Table
          columns={columns}
          rowSelection={rowSelection}
          pagination={pagination}
          dataSource={ans}
          bordered
          okText="确认"
          cancelText="取消"
          loading={this.props.loading}
        />
      </Modal>
    )
  }
}

const MaintenanceModal = Form.create()(MaintenanceModalForm);
export default MaintenanceModal;
